<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
          <el-form-item label="问卷名称" prop="questionnaireName">
            <el-input
              v-model="queryParams.questionnaireName"
              placeholder="请输入问卷名称"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <el-table v-loading="loading" :data="trainingList" >
          <el-table-column
            label="序号" type="index" :index="indexMethod"/>
          <el-table-column label="问卷名称" align="center" prop="questionnaireName"  />
          <el-table-column label="创建人" align="center" prop="creationName" :show-overflow-tooltip="true" width="100"/>
          <el-table-column label="创建时间" align="center" prop="creationTime" width="180" >
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.creationTime, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="handleSelect(scope.row,scope.$index)"
              >详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </el-col>
    </el-row>
    <el-dialog title="历史问卷调查" :visible.sync="openHisTitle" width="1000px" append-to-body  v-if='openHisTitle' >
   <div class="app-container">
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
         <el-button
           v-if="getRecordList.length>0"
           type="primary"
           plain
           size="small"
           @click="handleAddTitle"
         >确认</el-button>
       </el-col>
     </el-row>
     <el-table :row-style="{ height: '25px' }"  :cell-style="{ padding: '0px' }" border :data="getRecordList"  @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="序号" type="index" :index="indexMethodRecord"/>
       <el-table-column label="题目" align="center" prop="topicName" />
       <el-table-column label="题型" align="center" prop="questionType" />
       <el-table-column label="选项" align="center" prop="questionnaireAnswersItem" />
     </el-table>
     <pagination
       v-show="totalRecord>0"
       :total="totalRecord"
       :page.sync="queryParamsRecord.pageNum"
       :limit.sync="queryParamsRecord.pageSize"
       @pagination="getTitleList"
     />
   </div>
    </el-dialog>
  </div>
</template>
<script >
import {  listInvestigationHis } from "@/api/questionnaire/investigation";
import {listType} from "@/api/maintype/type";
import MainType from "@/components/MainType/index"
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { listTitle, saveByQuestionnaireId,  } from "@/api/questionnaire/title";
export default {
  name:"his",
  components: {MainType},
  props:{
    questionnaireId:{
      type: String,
      default: null
    }
  },
  data(){
    return{
      typeCode:'investigation',
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 15,
        questionnaireName: null,
        classificationId:null
      },
      queryParamsRecord:{
        pageNum: 1,
        pageSize: 5,
        questionnaireId:null
      },
      ids:[],
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      total:0,
      totalRecord:0,
      trainingList:[],
      openHisTitle:false,
      getRecordList:[],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
    }
  },
  created() {
    this.listType();
    this.getList();
  },
  methods:{
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    //获取树节点数据
    listType(){
      listType({typeCode:'investigation'}).then(res=>{
        console.log(res);
        this.options=res.data;
      })
    },
    /** 查询活动信息培训列表 */
    getList() {
      this.loading = true;
      listInvestigationHis(this.queryParams).then(response => {
        this.trainingList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    //添加当前问卷的题目
    handleAddTitle(){
      if(this.ids.length>0){
        saveByQuestionnaireId(this.ids,this.questionnaireId).then(res=>{
          this.$message.success("添加成功");
          this.$emit("change")
          this.openHisTitle=false;
        })
      }else {
        this.$message.error("请选择历史题目");
      }
    },
    //历史问卷详情
    handleSelect(row,index){
      this.openHisTitle=true;
    this.queryParamsRecord.questionnaireId=row.questionnaireId;
    this.getTitleList();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.topicId)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    getTitleList(){
      listTitle(this.queryParamsRecord).then(res=>{
        console.log(res.rows)
        this.getRecordList=res.rows;
        this.getRecordList.map(function (record,index) {
          record.questionnaireAnswersItem= record.questionnaireAnswersList.map(function (item, index) {
            return (index + 1) + '.' + item.solutionName + ' ' +'('+ item.score+')';
          }).join(" ");
        }).join("\n");
        this.totalRecord=res.totalRecord;
      })
    },
    //序号展示
    indexMethod(index){
      return (this.queryParams.pageNum-1)*this.queryParams.pageSize +index+1;
    },
    indexMethodRecord(index){
      return (this.queryParamsRecord.pageNum-1)*this.queryParamsRecord.pageSize +index+1;
    },
    //树点击事件
    getNode(data,node,obj){
      console.log(data)
      if(data.parentId!='00000000-0000-0000-0000-000000000000'){
        this.queryParams.classificationId=data.id
      }else {
        this.queryParams.classificationId=null
      }
      this.getList()
    },
  }
}
</script>
<style scoped lang="scss">

</style>
